<template>
  <div class="body">
    <div class="formli" style="margin-top: 0.5rem;">
      <h1>
        <label>支付宝账户</label>
      </h1>
      <input type="text" v-model="zhanghu" placeholder="请输入支付宝账户" />
    </div>
    <div class="formli">
      <h1>
        <label>姓名</label>
      </h1>
      <input
        type="text"
        v-model="zhanghuname"
        placeholder="请输入支付宝账户姓名"
      />
    </div>
    <div class="formli">
      <h1>
        <label>提现金额</label>
        <i>￥{{ ketixian | money }}</i>
        <span>当前余额</span>
      </h1>
      <input
        @click="toastmsg()"
        type="text"
        v-model="moneytext"
        placeholder="请选择要提现的金额"
        readonly="readonly"
      />
    </div>
    <ul>
      <li @click="checknum(10)"><label>￥10</label></li>
      <li @click="checknum(20)"><label>￥20</label></li>
      <li @click="checknum(30)"><label>￥30</label></li>
      <li @click="checknum(40)"><label>￥40</label></li>
      <li @click="checknum(50)"><label>￥50</label></li>
    </ul>

    <h3 @click="tixian()">立即提现</h3>

    <div class="txshadow" v-if="shadow">
      <div class="txbox">
        <img
          @click="closeShadow()"
          class="close"
          src="../../assets/img/rwxx_icon_gb.png"
          alt=""
        />

        <h1>提现需要进行手机号码认证</h1>

        <div class="form">
          <input
            type="text"
            placeholder="请输入手机已绑定的手机号"
            v-model="phone"
            @input="phonecheck()"
            @paste="phonePaste($event)"
            ref="inputPhone"
          />
          <span @click="getCode()" v-if="msgtext === '获取验证码'">{{
            msgtext
          }}</span>
          <span v-if="msgtext !== '获取验证码'">{{ msgtext }}</span>
        </div>

        <!--                <div class="vscodebox">-->
        <!--                    <div class="vcode" id='vertifycode'>-->
        <!--                        <input type="tel" maxlength='6' ref='code' class='code' id='code'-->
        <!--                               @focus='focus=true'-->
        <!--                               v-model='code'-->
        <!--                               @blur='focus=false'-->
        <!--                               :disabled='disabled'-->
        <!--                        >-->
        <!--                        <div class="labels">-->
        <!--                            <label class='label' for="code" :class='{active: focus===true && index===currentIndex}' v-for='(item,index) in length' v-html='arrCode[index]'>-->
        <!--                            </label>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div>-->

        <h2 @click="tixianNow()">确认提现</h2>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { axiosPost, axiosPostnotoken } from '../../axios';
export default {
  name: '',
  data() {
    return {
      zhanghu: '',
      zhanghuname: '',
      status: true,
      moneytext: '',
      ketixian: 0,
      shadow: false,
      phone: '',
      phoneold: '',
      inputstate: true,
      msgtext: '获取验证码',
      length: 6,
      code: '',
      focus: false,
      disabled: false,
    };
  },
  mounted() {
    this.getmoney();
  },
  computed: {
    arrCode: function() {
      return this.code.split('');
    },
    currentIndex: function() {
      return this.code.length;
    },
  },
  watch: {
    code: function(newV) {
      this.code = newV.replace(/[^\d]/g, ''); // 限制非数字
      if (newV.length >= 6) {
        setTimeout(function() {
          //console.log(that.code)
        }, 1);
      }
    },
  },
  methods: {
    //提示文本
    toastmsg() {
      Toast({
        message: '请选择要提现的金额',
        duration: 1000,
      });
    },
    //检测复制文本
    phonePaste() {
      setTimeout(() => {
        //检测字符串是否为数字与空格组合 || 是否大于13
        if (!/^[0-9\d\s]*$/.test(this.phone) || this.phone.length > 13) {
          return Toast({
            message: '请输入正确的手机号码',
            duration: 1000,
          });
        }
        if (
          !/^1[3456789]\d{9}$/.test(this.phone.replace(/\s*/g, '')) &&
          this.inputstate
        ) {
          this.inputstate = false;
          setTimeout(() => {
            this.inputstate = true;
          }, 1000);
          return Toast({
            message: '请输入正确的手机号码',
            duration: 1000,
          });
        }
        this.phone =
          this.phone.slice(0, 3) +
          ' ' +
          this.phone.slice(3, 7) +
          ' ' +
          this.phone.slice(7);
      }, 1);
    },
    //选择金额控制
    checknum(num) {
      if (this.ketixian < num) {
        Toast({
          message: '金额不足',
          duration: 1000,
        });
        return;
      }
      this.moneytext = num;
    },
    //开始提现
    tixian() {
      //函数节流
      if (this.status) {
        this.status = false;
        setTimeout(() => {
          this.status = true;
        }, 500);
      } else {
        return;
      }
      //判断支付宝账户状态
      if (this.zhanghu == '') {
        return Toast({
          message: '请输入正确的支付宝账户',
          duration: 1000,
        });
      }

      if (this.zhanghuname == '') {
        return Toast({
          message: '请输入支付宝账户姓名',
          duration: 1000,
        });
      }

      //判断支付宝账户状态
      if (this.moneytext == '') {
        return Toast({
          message: '请选择提现金额',
          duration: 1000,
        });
      }

      this.tixianNow();
      // this.shadow=!this.shadow;
    },
    //刷新余额
    getmoney() {
      axiosPost(
        'users/user_info',
        {
          user_id: JSON.parse(localStorage.getItem('userinfo')).user_id,
        },
        (res) => {
          //console.log(res)
          if (res.code !== 1) {
            return Toast(res.msg);
          }
          this.ketixian = res.data.amount;
        }
      );
    },
    //验证码弹窗控制
    closeShadow() {
      this.shadow = !this.shadow;
    },
    //验证码手机号码本地验证
    phonecheck() {
      //检测字符串是否为数字与空格组合 || 是否大于13
      if (!/^[0-9\d\s]*$/.test(this.phone) || this.phone.length > 13) {
        this.phone = this.phone.substr(0, this.phone.length - 1);
      }
      //适当添加空格
      if (this.phone.length > this.phoneold.length) {
        switch (this.phone.length) {
          case 3:
            this.phone = this.phone + ' ';
            break;
          case 8:
            this.phone = this.phone + ' ';
            break;
          case 13:
            if (
              !/^1[3456789]\d{9}$/.test(this.phone.replace(/\s*/g, '')) &&
              this.inputstate
            ) {
              this.inputstate = false;
              setTimeout(() => {
                this.inputstate = true;
              }, 1000);
              return Toast({
                message: '请输入正确的手机号码',
                duration: 1000,
              });
            }
            break;
          default:
            break;
        }
      }
      this.phoneold = this.phone;
    },
    //获取验证码
    getCode() {
      if (
        this.phone.replace(/\s*/g, '').length === 0 ||
        !/^1[3456789]\d{9}$/.test(this.phone.replace(/\s*/g, ''))
      ) {
        return Toast({
          message: '请输入正确的手机号码',
          duration: 1000,
        });
      }

      axiosPostnotoken(
        'code/send',
        {
          mobile: this.phone.replace(/\s*/g, ''),
          type: 8,
        },
        (res) => {
          if (res.code !== 1) {
            return;
          }
          let code = 60;
          this.msgtext = code + 's重新获取';
          let daojishi = setInterval(() => {
            code--;
            this.msgtext = code + 's重新获取';
            if (code == 0) {
              clearInterval(daojishi);
              this.msgtext = code + '获取验证码';
            }
          }, 1000);
        }
      );
    },
    //确认提现
    tixianNow() {
      // if(this.code.length<6){
      //     return Toast('请输入正确验证码')
      // }
      axiosPost(
        'order/cash_out',
        {
          amount: this.moneytext,
          account_name: this.zhanghuname,
          account_no: this.zhanghu,
          // 'code':this.code
        },
        (res) => {
          //console.log(res)
          if (res.code !== 1) {
            return Toast(res.msg);
          }
          Toast({
            message: '提现成功',
            duration: 1000,
          });
          this.$router.push('/person');
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
@import '../../style/default';
.body {
  background: @color4;
}

.formli {
  padding: 0 0.4rem;
  h1 {
    font-size: @font28;
    font-weight: 400;
    color: #2a2b3f;
    line-height: 0.48rem;
    i {
      float: right;
      color: @color1;
    }
    span {
      float: right;
    }
  }
  input {
    width: 5.7rem;
    height: 1.2rem;
    background: rgba(247, 247, 248, 1);
    border-radius: 0.6rem;
    border: 0;
    padding: 0 0.5rem;
    line-height: 1.2rem;
    color: @color3;
    font-size: @font42;
    margin: 0.3rem auto;
    letter-spacing: 1px;
  }
  input::placeholder {
    font-size: 0.38rem;
    font-weight: normal;
    letter-spacing: 0;
  }
}

ul {
  padding: 0 0.4rem;
  overflow: hidden;
  margin-top: 0.1rem;
  li {
    width: 1.3rem;
    background: @color4;
    border: 1px dashed @color1;
    border-radius: 0.325rem;
    float: left;
    padding: 0.091rem 0;
    -webkit-transform: scale(0.7) translate(-20%, -20%);
    transform: scale(0.7) translate(-20%, -20%);
    font-size: 0.364rem;
    font-weight: 400;
    color: @color1;
    line-height: normal;
    text-align: center;
    margin-right: -0.04rem;
    cursor: pointer;
  }
}

h3 {
  width: 6.7rem;
  height: 0.86rem;
  background: @color1;
  border-radius: 0.43rem;
  text-align: center;
  line-height: 0.86rem;
  font-size: @font32;
  font-weight: 400;
  color: @color4;
  margin: 0.3rem auto 0;
}

.txshadow {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  .txbox {
    width: 6.2rem;
    height: 5.5rem;
    background: @color4;
    border-radius: 0.06rem;
    position: absolute;
    left: 50%;
    top: 49%;
    margin-left: -3.1rem;
    margin-top: -2.75rem;

    .close {
      position: absolute;
      left: 50%;
      bottom: -1rem;
      width: 0.5rem;
      margin-left: -0.25rem;
      z-index: 100;
    }

    h1 {
      font-size: 0.34rem;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      text-align: center;
      margin-top: 0.69rem;
    }

    .form {
      margin: 0.35rem 0.4rem 0;
      height: 1.04rem;
      border-bottom: 1px solid rgba(204, 204, 204, 1);
      line-height: 1.04rem;

      input {
        border: 0;
        font-size: @font26;
        color: @color1;
      }
      input::placeholder {
        font-size: @font26;
        color: @color1;
      }
      span {
        font-size: @font26;
        color: @color2;
        margin-left: 0.5rem;
      }
    }

    ul {
      margin: 0.35rem 0.4rem;
      padding: 0;
      overflow: hidden;
      li {
        width: 0.75rem;
        height: 0.85rem;
        border: 0.01rem solid rgba(204, 204, 204, 1);
        border-radius: 0.06rem;
        float: left;
        margin-right: 0.11rem;
      }
      input {
        border: 0;
        max-width: 0.75rem;
        font-size: 0.44rem;
        font-weight: 400;
        color: rgba(42, 43, 63, 1);
        text-align: center;
        line-height: 0.85rem;
      }
    }

    h2 {
      width: 2.1rem;
      background: rgba(255, 70, 45, 1);
      border-radius: 0.4rem;
      font-size: @font32;
      font-weight: 400;
      color: @color4;
      text-align: center;
      margin: 0 auto;
      padding: 0.2rem 0;
    }
  }
}

.vscodebox {
  margin: 0.35rem 0.4rem;
  padding: 0;
  overflow: hidden;
  @keyframes animate {
    100% {
      opacity: 0;
    }
  }
  .container {
    padding: 5%;
  }
  .vcode {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  .code {
    width: 100%;
    padding: 0;
    font-size: 35px;
    overflow: hidden;
    border: none;
    outline: none;
    opacity: 0;
    margin-left: -100%; // ios上透明度为0时依然有光标
    -webkit-tap-highlight-color: transparent;
  }
  .labels {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    margin-top: -40px;
    -webkit-tap-highlight-color: transparent; // 解决ios点击灰色阴影的问题
  }
  .label {
    width: 0.75rem;
    height: 0.85rem;
    line-height: 0.85rem;
    border: 0.01rem solid rgba(204, 204, 204, 1);
    border-radius: 0.06rem;
    float: left;
    margin-right: 0.11rem;
    font-size: 0.44rem;
    font-weight: 400;
    color: rgba(42, 43, 63, 1);
    text-align: center;
  }
  .active:after {
    // 伪类实现光标效果
    content: ' ';
    display: inline-block;
    height: 0.7rem;
    width: 2px;
    margin-top: 0.07rem;
    background: #313131;
    animation: 0.8s animate infinite;
  }
}
</style>
